<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title="发布动态"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-button
          type="primary"
          size="small"
          @click="send()"
        >发布</van-button>
      </template>
    </van-nav-bar>
    <van-cell-group>
      <!-- 未选择版块 -->
      <van-cell
        center
        is-link
        to="/selectmodule"
        v-if="this.huati==null"
      >
        <van-row>
          <!-- 添加图片 -->
          <van-col span="3">
            <van-button class="plus_btn">
              <van-icon name="plus" />
            </van-button>
          </van-col>
          <van-col span="13">
            <p style="margin:0;padding-top:5px">发布到</p>
          </van-col>
          <van-col span="8">
            <p style="margin:0;font-size:0.3rem;padding-top:4px;text-align:right">请选择合适的版块</p>
          </van-col>
        </van-row>
      </van-cell>
      <!-- 已选择版块 -->
      <van-cell-group v-else>
        <van-row style="padding:8px">
          <van-col span="3">
            <van-image
              width="1.2rem"
              height="1.2rem"
              :src="'apis/kuan_api/ProductImg/'+huati.ProductImg"
              fit="contain"
            />
          </van-col>
          <van-col span="19">
            <p style="font-size:14px">{{huati.ProductName}}</p>
          </van-col>
          <van-col span="2">
            <van-icon
              name="cross"
              class="close"
              @click="huati=null"
            />
          </van-col>
        </van-row>
      </van-cell-group>
    </van-cell-group>
    <van-cell-group inset>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="300"
        placeholder="分享你此刻的想法"
        show-word-limit
      />
    </van-cell-group>
    <div style="margin:15px">
      <van-uploader
        :after-read="afterRead"
        v-model="fileList"
        multiple
        :max-count="9"
        name="img"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "sendmessage",
  data() {
    return {
      message: "",
      fileList: [],
      huati: [],
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    send() {
      console.log(this.huati.Productid);
      if (this.fileList == "" && this.message == "") {
        this.$toast.fail("动态内容或图片不能为空");
      } else {
        // 有图有文字
        if (this.fileList != "" && this.message != "") {
          let file = this.fileList[0].file;
          // this.fileList.forEach((element) => {
          //   file.push(element.file);
          // });
          let userid = this.$store.state.user.user_id;
          let message = this.message;
          let categoryid = this.huati.Productid;
          let param = new FormData();
          param.append("file", file);
          param.append("message", message);
          param.append("userid", userid);
          param.append("categoryid", categoryid);
          let config = { headers: { "Content-Type": "multipart/form-data" } };
          this.axios
            .post("apis/kuan_api/sendmessage.php", param, config)
            .then((res) => {
              this.$toast.success("发布成功");
              this.message == "";
              this.fileList == "";
              this.$router.push("/home");
            })
            .catch((err) => {
              console.error(err);
            });
        }
        // 有图无文字
        if (this.fileList != "" && this.message == "") {
          let file = this.fileList[0].file;
          // this.fileList.forEach((element) => {
          //   file.push(element.file);
          // });
          console.log(file);
          let userid = this.$store.state.user.user_id;
          let categoryid = this.huati.Productid;
          let param = new FormData();
          param.append("file", file);
          param.append("userid", userid);
          param.append("categoryid", categoryid);
          for (var value of param.values()) {
            console.log(value);
          }
          console.log(param.getAll("file"));
          let config = { headers: { "Content-Type": "multipart/form-data" } };
          this.axios
            .post("apis/kuan_api/sendmessage.php", param, config)
            .then((res) => {
              console.log(res);
              this.$toast.success("发布成功");
              this.fileList == [];
              this.$router.push("/home");
            })
            .catch((err) => {
              console.error(err);
            });
        }
        // 无图有文字
        if (this.message != "" && this.fileList == "") {
          let userid = this.$store.state.user.user_id;
          let message = this.message;
          let categoryid = this.huati.Productid;
          let param = new FormData();
          let config = { headers: { "Content-Type": "multipart/form-data" } };
          param.append("userid", userid);
          param.append("categoryid", categoryid);
          param.append("message", message);
          this.axios
            .post("apis/kuan_api/sendmessage.php", param, config)
            .then((res) => {
              this.$toast.success("发布成功");
              this.message == "";
              this.$router.push("/home");
            })
            .catch((err) => {
              console.error(err);
            });
        }
      }
    },
    afterRead(file) {
      console.log(file);
    },
  },
  created() {
    if (this.$route.query != "") {
      this.huati = this.$route.query.huati;
    }
  },
};
</script>

<style scoped>
.plus_btn {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  color: #229058;
  font-size: 0.5rem;
  background-color: #e8f4ee;
}
.close {
  border-radius: 15px;
  border: 0;
  background-color: lightgray;
  color: white;
  margin-top: 18px;
}
</style>